<template>
	<div class="common-layout">
		<el-container>
			<el-table :data="cartlist" :default-sort="{ prop: 'cart.id', order: 'ascending' }">
				<el-table-column width="70">
					<template #default="score">
						<el-checkbox v-model="score.row.show"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="cart.id" sortable label="编号" width="100" />
				<el-table-column label="图片" width="120">
					<template #default="score">
						<el-image :src="`${$Imgurl}/showImg/${score.row.book.picture}`"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="book.name" label="商品名称" width="300" />
				<el-table-column prop="book.price" label="商品单价" width="100"/>
				<el-table-column label="商品数量">
					<template #default="score">
						<el-input-number v-model="score.row.cart.num" :min="1" :max="10" />
					</template>
				</el-table-column>
				<el-table-column label="商品总价">
					<template #default="score">{{score.row.book.price*score.row.cart.num}}</template>
				</el-table-column>
			</el-table>
		</el-container>
		<el-row>
			<el-col :span="1">总价</el-col>
			<el-col :span="12">
				<el-input readonly label="总价" v-model="sum"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button @click="getOrd()" type="warning">下单</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../../ajax'
	
	export default{
		name:'Cart',
		data(){
			return{
				cartlist:[],
			}
		},
		created() {
			instance.get('/api/fore/cart/findAll').then((res)=>{
				if (res.data.code==200) {
					this.cartlist=res.data.data
					for (let i in this.cartlist) {
						this.cartlist[i].show=false
					}
				}
			}).catch((error)=>{
				
			})
		},
		computed:{
			sum(){
				let sum=0
				for (let i in this.cartlist) {
					if (this.cartlist[i].show==true) {
						sum+=this.cartlist[i].book.price*this.cartlist[i].cart.num
					}
				}
				return sum
			}
		},
		methods:{
			getOrd(){
				let arr=[]
				for (let i in this.cartlist) {
					if (this.cartlist[i].show==true) {
						arr.push(this.cartlist[i])
					}
					if (arr.length>0) {
						this.$store.state.goods=arr;
						this.$router.push('/home/make')
					}
					
				}
			}
		}
	}
</script>

<style scoped>
	.el-container{
		width: 80%;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	.el-table .el-image{
		width: 40px;
		height: 50px;
	}
	.el-row{
		width: 80%;
		position: fixed;
		bottom: 0;
		left: 12%;
		z-index: 99;
	}
	.el-row .el-col{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
